﻿<!DOCTYPE html
  PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>蓉车宝</title>
  <link rel="stylesheet" type="text/css" href="css/base.css" />
  <link rel="stylesheet" type="text/css" href="css/home.css" />
  <link rel="stylesheet" type="text/css" href="city/city.css" />
  <script type="text/javascript" src="script/jquery-1.8.0.min.js"></script>
  <script type="text/javascript" src="script/home_ban.js"></script>
  <script type="text/javascript" src="script/eg_top_search.js"></script>
  <script type="text/javascript" src="script/city.js"></script>
  <script type="text/javascript" src="script/snncar.js"></script>

  <!--引入vue和Axios.js 先导入vue  再导入axios -->
  <script src="./plugins/vue/dist/vue.js"></script>
  <script src="./plugins/axios/dist/axios.js"></script>
  <script src="./script/common.js"></script>

  <!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <script type="text/javascript">
    $(function () {
      $('.navmenu li').hover(function () {
        $('span', this).stop().css('height', '2px');
        $('span', this).animate({
          left: '0',
          width: '100%',
          right: '0'
        }, 200);
      }, function () {
        $('span', this).stop().animate({
          left: '50%',
          width: '0'
        }, 200);
      });
    });
  </script>
  <!--导航登陆网页版下拉-->
  <script type="text/javascript">
    $(function () {
      var setTime;
      $(".egc-top .nav-cent .operate").hover(function () {
        var _this = $(this);
        setTime = setTimeout(function () {
          _this.find(".sec-version").slideDown(200);
          _this.find("i").removeClass("icon-angle-down").addClass("icon-angle-up");
        }, 200);
      }, function () {
        if (setTime) {
          clearTimeout(setTime);
        }
        $(".egc-top .nav-cent .sec-version").slideUp(200);
        $(".egc-top .nav-cent .operate i").removeClass("icon-angle-up").addClass("icon-angle-down");
      });
    });
  </script>
  <!--底部信息下拉-->
  <script type="text/javascript">
    $(function () {
      var wind_wd = $(window).width();
      if (wind_wd <= 735) {
        /* $submenu.first().delay(400).slideDown(700);*/
        $('.relate .tit').on('click', function () {
          $(this).next('.con').slideToggle()
          $(this).parent().siblings('.items').find('.con').slideUp();
        });
      } else {
        $('.relate .tit').unbind("click");
        $('.relate .con').show();
      }
      $(window).resize(function () {
        var wind_wd = $(window).width();
        if (wind_wd <= 735) {
          /* $submenu.first().delay(400).slideDown(700);*/
          $('.relate .tit').on('click', function () {
            $(this).next('.con').slideToggle()
            $(this).parent().siblings('.items').find('.con').slideUp();
          });
        } else {
          $('.relate .tit').unbind("click");
          $('.relate .con').show();
        }
      });
    });
  </script>

  <!--搜搜框获取焦点-->
  <script type="text/javascript">
    $(function () {
      $('.sea-ipt-txt').focus(function () {
        $(this).addClass("on");
        $('.search-btn').addClass("on");
      });
      $('.sea-ipt-txt').blur(function () {
        $(this).removeClass("on");
        $('.search-btn').removeClass("on");
      });
    });
  </script>
  <!--下拉导航关闭-->
  <script type="text/javascript">
    $(function () {
      $('.menu-mb i').click(function () {
        $(".navigation-mb-list").slideDown(300);
      });
      $('.navigation-mb-list .list-close-btn').click(function () {
        $(".navigation-mb-list").slideUp(300);
      });
    });
  </script>
  <!--stress搜索关闭-->
  <script type="text/javascript">
    $(function () {
      var setTime;
      $(".sercat .weixin").hover(function () {
        setTime = setTimeout(function () {
          $(".sercat .wxewm").show();
        }, 300);
      }, function () {
        if (setTime) {
          clearTimeout(setTime);
        }
        $(".sercat .wxewm").hide();
      });
    });
  </script>
  <script type="text/javascript">
    $(function () {
      var scroll_heitht = $('body').offset().top;
      var isShow = true;
      $(window).scroll(function () {
        if ($(window).scrollTop() > scroll_heitht && isShow) {
          $('.stress-search-box').slideDown(200);
        } else {
          $('.stress-search-box').slideUp(200);
        }
      });
      $('.stress-close a').click(function () {
        isShow = false;
        $('.stress-search-box').slideUp(200).unbind(window, aa);
      });
    });
  </script>
</head>

<body>
  <div id="carDiv">
    <div class="egc-top">
      <div class="nav-cent">
        <div class="top-r"><a href="javaScript:void(0)" id="b-regist">注册</a>|<a href="#" id="b-login" class="b-login">登陆</a>| <a href="/shoppingCar.html"><span class="shopping">购物车<span style="color: red;">{{shoppingNum}}</span></span></a></div>
        <div class="top-l">全国统一客服热线：XXX</div>
        <div class="clear_fix"></div>
      </div>
    </div>
    <div class="navigation">
      <div class="nav-cent">
        <div class="logo"><a href="index.html"><img src="images/logo.png" width="240" /></a></div>
        <div class="city"><span id="DY_site_name" class="red city-name Left">合肥</span>
          <div id="JS_hide_city_menu_11" class="city-select cut_handdler Left"><a href="javascript:void(0);"
              class="common-bg selector">切换城市</a>
            <div id="JS_header_city_bar_box" class="hide_city_group">
              <div class="hideMap">
                <div class="showPanel clearfix">
                  <div class="Left mycity">
                    <div id="JS_current_city_box"> 当前城市：<strong id="JS_city_current_city">合肥</strong></div>
                    <div id="JS_default_city_delete" style="display: none;"></div>
                  </div>
                </div>
                <div class="showPanel showPanel2 clearfix">
                  <div class="hot_city" id="JS_header_city_hot"></div>
                  <div class="city_words mt10" id="JS_header_city_char"></div>
                </div>
                <div class="scrollBody">
                  <div class="cityMap clearfix">
                    <table id="JS_header_city_list" class="city_list" style="margin-top: 0px;">
                      <tbody>
                      </tbody>
                    </table>
                  </div>
                  <div class="scrollBar"><span id="JS_header_city_bar" style="margin-top: 0px;"></span></div>
                </div>
              </div>
            </div>
          </div>
          <span class="common-bg city-logo"></span>
        </div>
        <div class="sea">
          <div class="egc-sea-box">
            <input type="text" class="sea-ipt-txt" v-model="query.keyword" placeholder="搜索您想要的车" />
            <a href="#" class="search-btn" @click="search">搜索</a>
          </div>
        </div>
        <div class="hot-phone"><i></i> <span class="js-change-phone">XXX</span></div>
      </div>
    </div>
    <ul class="navmenu">
      <li class="active"><a href="index.html">首页</a><span></span></li>
      <li><a href="list.html">我要买车</a><span></span></li>
      <li><a href="wymc.html">我要卖车</a><span></span></li>
      <li><a href="#">汽车保险</a><span></span></li>
      <li><a href="#">汽车百科</a><span></span></li>
    </ul>
    <div class="clear_fix"></div>
    <div class="stress-search-box row">
      <div class="stress-close"><a href="javascript:;"></a></div>
      <div class="nav-cents">
        <ul>
          <li class="logo"><a href="index.html"><img src="images/logo.png" width="180" /></a></li>
          <li><a href="index.html">首页</a></li>
          <li><a href="list.html">我要买车</a></li>
          <li><a href="wymc.html">我要卖车</a></li>
          <li><a href="#">阳光联盟</a></li>
          <li><a href="#">我要加盟</a></li>
        </ul>
        <div class="seas">
          <div class="egc-sea-box">
            <input type="text" class="sea-ipt-txt" placeholder="搜索您想要的车">
            <a href="#" class="search-btn">搜索</a>
          </div>
        </div>
      </div>
    </div>
    <div class="clear_fix"></div>
    <!--所在位置-->
    <div class="crumbp"><a href="#">首页</a> <em>&gt;</em> <span>个人二手车</span></div>
    <div class="mainbox">
      <!--搜索条件-->
      <div class="comfilter-bd">
        <div class="filterBox">
          <dl class="fliter-bd clearfix">
            <dt>品牌：</dt>
            <dd class="clickBrandWidget">
              <a class="on" href="#">不限</a>
              <div v-for="cartype in allCarTypes">
                <a class="" href="#" :title="cartype.name" @click="searchCarType(cartype.id)"> {{cartype.name}} </a>
              </div>
              <!--品牌全部-->
              <span class="brand-all z30"> <em data-role="show">全部<i></i></em>
                <div data-role="otherBrand" class="otherbrand" style="display: none;">
                  <div class="o-b-box"><span class="arrow"><s></s></span>
                    <ul data-role="letterNav" class="o-b-list">
                      <li class="clearfix"> <span>A</span>
                        <div> <a href="#" title="奥迪二手车"> 奥迪 </a> </div>
                      </li>
                      <li class="clearfix"> <span>B</span>
                        <div> <a href="#" title="宝骏二手车"> 宝骏 </a> <a href="#" title="宝马二手车"> 宝马 </a> <a href="#"
                            title="保时捷二手车"> 保时捷 </a> <a href="#" title="北京二手车"> 北京 </a> <a href="#" title="北汽二手车"> 北汽
                          </a> <a href="#" title="北汽幻速二手车"> 北汽幻速 </a> <a href="#" title="北汽绅宝二手车"> 北汽绅宝 </a> <a href="#"
                            title="奔驰二手车"> 奔驰 </a> <a href="#" title="奔腾二手车"> 奔腾 </a> <a href="#" title="本田二手车"> 本田 </a>
                          <a href="#" title="标致二手车"> 标致 </a> <a href="#" title="别克二手车"> 别克 </a> <a href="#"
                            title="比亚迪二手车"> 比亚迪 </a>
                        </div>
                      </li>
                      <li class="clearfix"> <span>C</span>
                        <div> <a href="#" title="长安二手车"> 长安 </a> <a href="#" title="长安商用二手车"> 长安商用 </a> <a href="#"
                            title="长城二手车"> 长城 </a> <a href="#" title="传祺二手车"> 传祺 </a> <a href="#" title="川汽野马二手车"> 川汽野马
                          </a> </div>
                      </li>
                      <li class="clearfix"> <span>D</span>
                        <div> <a href="#" title="大发二手车"> 大发 </a> <a href="#" title="道奇二手车"> 道奇 </a> <a href="#"
                            title="大众二手车"> 大众 </a> <a href="#" title="东风二手车"> 东风 </a> <a href="#" title="东风风度二手车"> 东风风度
                          </a> <a href="#" title="东风风神二手车"> 东风风神 </a> <a href="#" title="东风风行二手车"> 东风风行 </a> <a href="#"
                            title="东风小康二手车"> 东风小康 </a> <a href="#" title="东南二手车"> 东南 </a> <a href="#" title="DS二手车"> DS
                          </a> </div>
                      </li>
                      <li class="clearfix"> <span>F</span>
                        <div> <a href="#" title="菲亚特二手车"> 菲亚特 </a> <a href="#" title="丰田二手车"> 丰田 </a> <a href="#"
                            title="福迪二手车"> 福迪 </a> <a href="#" title="福特二手车"> 福特 </a> <a href="#" title="福田二手车"> 福田 </a>
                        </div>
                      </li>
                      <li class="clearfix"> <span>G</span>
                        <div> <a href="#" title="GMC二手车"> GMC </a> <a href="#" title="广汽吉奥二手车"> 广汽吉奥 </a> <a href="#"
                            title="观致二手车"> 观致 </a> </div>
                      </li>
                      <li class="clearfix"> <span>H</span>
                        <div> <a href="#" title="哈飞二手车"> 哈飞 </a> <a href="#" title="哈弗二手车"> 哈弗 </a> <a href="#"
                            title="海马二手车"> 海马 </a> <a href="#" title="红旗二手车"> 红旗 </a> <a href="#" title="黄海二手车"> 黄海 </a>
                          <a href="#" title="华普二手车"> 华普 </a> <a href="#" title="华泰二手车"> 华泰 </a>
                        </div>
                      </li>
                      <li class="clearfix"> <span>J</span>
                        <div> <a href="#" title="Jeep二手车"> Jeep </a> <a href="#" title="江淮二手车"> 江淮 </a> <a href="#"
                            title="江铃二手车"> 江铃 </a> <a href="#" title="捷豹二手车"> 捷豹 </a> <a href="#" title="吉利二手车"> 吉利 </a>
                          <a href="#" title="金杯二手车"> 金杯 </a> <a href="#" title="九龙二手车"> 九龙 </a>
                        </div>
                      </li>
                      <li class="clearfix"> <span>K</span>
                        <div> <a href="#" title="凯迪拉克二手车"> 凯迪拉克 </a> <a href="#" title="凯翼二手车"> 凯翼 </a> </div>
                      </li>
                      <li class="clearfix"> <span>L</span>
                        <div> <a href="#" title="雷克萨斯二手车"> 雷克萨斯 </a> <a href="#" title="雷诺二手车"> 雷诺 </a> <a href="#"
                            title="猎豹二手车"> 猎豹 </a> <a href="#" title="力帆二手车"> 力帆 </a> <a href="#" title="铃木二手车"> 铃木 </a>
                          <a href="#" title="陆风二手车"> 陆风 </a> <a href="#" title="路虎二手车"> 路虎 </a>
                        </div>
                      </li>
                      <li class="clearfix"> <span>M</span>
                        <div> <a href="#" title="马自达二手车"> 马自达 </a> <a href="#" title="MG二手车"> MG </a> <a href="#"
                            title="MINI二手车"> MINI </a> </div>
                      </li>
                      <li class="clearfix"> <span>N</span>
                        <div> <a href="#" title="纳智捷二手车"> 纳智捷 </a> </div>
                      </li>
                      <li class="clearfix"> <span>O</span>
                        <div> <a href="#" title="欧宝二手车"> 欧宝 </a> <a href="#" title="讴歌二手车"> 讴歌 </a> <a href="#"
                            title="欧朗二手车"> 欧朗 </a> </div>
                      </li>
                      <li class="clearfix"> <span>Q</span>
                        <div> <a href="#" title="启辰二手车"> 启辰 </a> <a href="#" title="奇瑞二手车"> 奇瑞 </a> <a href="#"
                            title="起亚二手车"> 起亚 </a> </div>
                      </li>
                      <li class="clearfix"> <span>R</span>
                        <div> <a href="#" title="日产二手车"> 日产 </a> <a href="#" title="荣威二手车"> 荣威 </a> <a href="#"
                            title="瑞麒二手车"> 瑞麒 </a> </div>
                      </li>
                      <li class="clearfix"> <span>S</span>
                        <div> <a href="#" title="三菱二手车"> 三菱 </a> <a href="#" title="上汽大通二手车"> 上汽大通 </a> <a href="#"
                            title="双龙二手车"> 双龙 </a> <a href="#" title="斯巴鲁二手车"> 斯巴鲁 </a> <a href="#" title="斯柯达二手车"> 斯柯达
                          </a> <a href="#" title="思铭二手车"> 思铭 </a> <a href="#" title="Smart二手车"> Smart </a> </div>
                      </li>
                      <li class="clearfix"> <span>W</span>
                        <div> <a href="#" title="威旺二手车"> 威旺 </a> <a href="#" title="沃尔沃二手车"> 沃尔沃 </a> <a href="#"
                            title="五菱二手车"> 五菱 </a> </div>
                      </li>
                      <li class="clearfix"> <span>X</span>
                        <div> <a href="#" title="夏利二手车"> 夏利 </a> <a href="#" title="现代二手车"> 现代 </a> <a href="#"
                            title="雪佛兰二手车"> 雪佛兰 </a> <a href="#" title="雪铁龙二手车"> 雪铁龙 </a> </div>
                      </li>
                      <li class="clearfix"> <span>Y</span>
                        <div> <a href="#" title="英菲尼迪二手车"> 英菲尼迪 </a> <a href="#" title="一汽二手车"> 一汽 </a> <a href="#"
                            title="依维柯二手车"> 依维柯 </a> <a href="#" title="永源二手车"> 永源 </a> </div>
                      </li>
                      <li class="clearfix"> <span>Z</span>
                        <div> <a href="#" title="中华二手车"> 中华 </a> <a href="#" title="众泰二手车"> 众泰 </a> </div>
                      </li>
                    </ul>
                  </div>
                </div>
              </span>
              <!--品牌全部-->
            </dd>
          </dl>
          <dl class="fliter-bd clearfix">
            <dt>车系：</dt>
            <dd class="clickTagWidget"><a class="on" href="#">不限</a> <a class="" href="#" title="二手捷达"> 捷达 </a> <a
                class="" href="#" title="二手速腾"> 速腾 </a> <a class="" href="#" title="二手宝来"> 宝来 </a> <a class="" href="#"
                title="二手迈腾">
                迈腾 </a> <a class="" href="#" title="二手奔腾B70"> 奔腾B70 </a> <a class="" href="#" title="二手福克斯">
                福克斯 </a> <a class="" href="#" title="二手哈弗H6"> 哈弗H6 </a> <a class="" href="#" title="二手菱智"> 菱智 </a>
              <a class="" href="#" title="二手高尔夫"> 高尔夫 </a> <a class="" href="#" title="二手五菱宏光"> 五菱宏光 </a> <a class=""
                href="#" title="二手马自达6"> 马自达6 </a> <a class="" href="#" title="二手奔腾X80"> 奔腾X80 </a>
              <a class="" href="#" title="二手奔腾B50"> 奔腾B50 </a> <a class="" href="#" title="二手奥迪A6L"> 奥迪A6L </a> <a
                class="" href="#" title="二手科鲁兹"> 科鲁兹 </a>
            </dd>
          </dl>
          <dl class="fliter-bd clearfix">
            <dt>价格：</dt>
            <dd>
              <a class="on" href="#">不限</a>
              <a class="" href="#" title="3万以下二手车" @click="searchByPrice(0,3)"> 3万以下 </a>
              <a class="" href="#" title="5万以下二手车" @click="searchByPrice(3,5)">3-5万 </a>
              <a class="" href="#" title="7万以下二手车" @click="searchByPrice(5,7)"> 5-7万 </a>
              <a class="" href="#" title="9万以下二手车" @click="searchByPrice(7,9)">7-9万</a>
              <a class="" href="#" title="12万以下二手车" @click="searchByPrice(9,12)"> 9-12万 </a>
              <a class="" href="#" title="16万以下二手车" @click="searchByPrice(12,16)">12-16万 </a>
              <a class="" href="#" title="20万以下二手车" @click="searchByPrice(16,20)"> 16-20万 </a>
              <a class="" href="#" title="20万以上二手车" @click="searchByPrice(20,30)"> 20万以上 </a>
              <span class="input-box clearfix rangeFilter">
                <label>
                  <input type="text" value="" data-default-value="0" size="4" class="js-begin" maxlength="3"
                    id="my_price_b" name="b">
                </label>
                <label><i class="input-line">-</i></label>
                <label>
                  <input type="text" value="" data-default-value="999" size="4" class="js-end" maxlength="3"
                    id="my_price_e" name="e">
                </label>
                <label class="input-unit">万</label>
                <label><a gjalog="" href="#" class="input-btn js-btn">筛选</a></label>
              </span>
            </dd>
          </dl>
          <dl class="fliter-bd clearfix">
            <dt>车龄：</dt>
            <dd>
              <a data-role="filterItemAge" data-value="" class="on" href="#">不限</a>
              <a class="" href="#" title="5年以上二手车"> 5年以上 </a>
              <a class="" href="#" title="5年内二手车"> 5年内 </a>
              <a class="" href="#" title="3年内二手车"> 3年内 </a>
              <a class="" href="#" title="1年以内二手车"> 1年以内 </a>
            </dd>
          </dl>
          <div class="moreitem clearfix">
            <span>更多：</span>
            <dl class="selecter">
              <dt>车型</dt>
              <dd>
                <ul>
                  <li><a href="javascript:void(0);">不限</a></li>
                  <li><a href="javascript:void(0);"> 两厢轿车 </a></li>
                  <li><a href="javascript:void(0);"> 三厢轿车 </a></li>
                  <li><a href="javascript:void(0);"> 跑车 </a></li>
                  <li><a href="javascript:void(0);"> SUV </a></li>
                  <li><a href="javascript:void(0);"> MPV </a></li>
                </ul>
              </dd>
            </dl>
            <dl class="selecter">
              <dt>座位</dt>
              <dd>
                <ul>
                  <li><a href="javascript:void(0);">不限</a></li>
                  <li><a href="javascript:void(0);"> 2座 </a></li>
                  <li><a href="javascript:void(0);"> 4座 </a></li>
                  <li><a href="javascript:void(0);"> 5座 </a></li>
                  <li><a href="javascript:void(0);"> 6座 </a></li>
                  <li><a href="javascript:void(0);"> 7座及以上 </a></li>
                </ul>
              </dd>
            </dl>
            <dl class="selecter">
              <dt>行驶里程</dt>
              <dd>
                <ul>
                  <li><a href="javascript:void(0);">不限</a></li>
                  <li><a href="javascript:void(0);"> 1万公里内 </a></li>
                  <li><a href="javascript:void(0);"> 3万公里内 </a></li>
                  <li><a href="javascript:void(0);"> 5万公里内 </a></li>
                  <li><a href="javascript:void(0);"> 5万公里以上 </a></li>
                </ul>
              </dd>
            </dl>
            <dl class="selecter">
              <dt>变速箱</dt>
              <dd>
                <ul>
                  <li><a href="javascript:void(0);">不限</a></li>
                  <li><a href="javascript:void(0);"> 手动 </a></li>
                  <li><a href="javascript:void(0);"> 自动 </a></li>
                </ul>
              </dd>
            </dl>
            <dl class="selecter">
              <dt>排量</dt>
              <dd>
                <ul>
                  <li><a href="javascript:void(0);">不限</a></li>
                  <li><a href="javascript:void(0);"> 1.0L以下 </a></li>
                  <li><a href="javascript:void(0);"> 1.0-1.6L </a></li>
                  <li><a href="javascript:void(0);"> 1.6-2.0L </a></li>
                  <li><a href="javascript:void(0);"> 2.0-3.0L </a></li>
                  <li><a href="javascript:void(0);"> 3.0L以上 </a></li>
                </ul>
              </dd>
            </dl>
            <dl class="selecter">
              <dt>排放标准</dt>
              <dd>
                <ul>
                  <li><a href="javascript:void(0);">不限</a></li>
                  <li><a href="javascript:void(0);"> 国二及以上 </a></li>
                  <li><a href="javascript:void(0);"> 国三及以上 </a></li>
                  <li><a href="javascript:void(0);"> 国四及以上 </a></li>
                  <li><a href="javascript:void(0);"> 国五 </a></li>
                </ul>
              </dd>
            </dl>
            <dl class="selecter">
              <dt>燃油类型</dt>
              <dd>
                <ul>
                  <li><a href="javascript:void(0);">不限</a></li>
                  <li><a href="javascript:void(0);"> 汽油 </a></li>
                  <li><a href="javascript:void(0);"> 柴油 </a></li>
                  <li><a href="javascript:void(0);"> 电动 </a></li>
                  <li><a href="javascript:void(0);"> 油电混合 </a></li>
                  <li><a href="javascript:void(0);"> 其他 </a></li>
                </ul>
              </dd>
            </dl>
            <dl class="selecter">
              <dt>颜色</dt>
              <dd>
                <ul>
                  <li><a href="javascript:void(0);">不限</a></li>
                  <li><a href="javascript:void(0);"> <i class="c-lump03"></i>黑色 </a></li>
                  <li><a href="javascript:void(0);"> <i class="c-lump04"></i>白色 </a></li>
                  <li><a href="javascript:void(0);"> <i class="c-lump10"></i>银灰色 </a></li>
                  <li><a href="javascript:void(0);"> <i class="c-lump09"></i>红色 </a></li>
                  <li><a href="javascript:void(0);"> <i class="c-lump15"></i>深灰色 </a></li>
                  <li><a href="javascript:void(0);"> <i class="c-lump11"></i>橙色 </a></li>
                  <li><a href="javascript:void(0);"> <i class="c-lump02"></i>绿色 </a></li>
                  <li><a href="javascript:void(0);"> <i class="c-lump05"></i>蓝色 </a></li>
                  <li><a href="javascript:void(0);"> <i class="c-lump06"></i>咖啡色 </a></li>
                  <li><a href="javascript:void(0);"> <i class="c-lump07"></i>紫色 </a></li>
                  <li><a href="javascript:void(0);"> <i class="c-lump08"></i>香槟色 </a></li>
                  <li><a href="javascript:void(0);"> <i class="c-lump12"></i>多彩色 </a></li>
                  <li><a href="javascript:void(0);"> <i class="c-lump13"></i>黄色 </a></li>
                  <li><a href="javascript:void(0);"> <i class="c-lump14"></i>其它 </a></li>
                </ul>
              </dd>
            </dl>
            <dl class="selecter">
              <dt>国别</dt>
              <dd>
                <ul>
                  <li><a href="javascript:void(0);">不限</a></li>
                  <li><a href="javascript:void(0);"> 德系 </a></li>
                  <li><a href="javascript:void(0);"> 日系 </a></li>
                  <li><a href="javascript:void(0);"> 美系 </a></li>
                  <li><a href="javascript:void(0);"> 法系 </a></li>
                  <li><a href="javascript:void(0);"> 韩系 </a></li>
                  <li><a href="javascript:void(0);"> 国产 </a></li>
                  <li><a href="javascript:void(0);"> 其他 </a></li>
                </ul>
              </dd>
            </dl>
          </div>

        </div>
        <div class="sel-menu clearfix">
          <p class="sel-p">当前筛选&gt;</p>
          <a href="#" class="sel-a">大众</a> <a href="#" class="sel-reset">重置</a>
          <p class="sel-p">共为您找到<b>{{pageInfo.count}}</b>辆好车</p>
        </div>
      </div>
      <div class="seqBox clearfix">
        <p class="fr seqtype">共找到<b>{{pageInfo.count}}</b>辆 </p>
        <ul class="sequen">
          <li class="first"><a href="#">默认排序</a></li>
          <li><a href="#" title="" @click="searchBySort($event)" sort-field="onsaletime" sort-type="asc">最新发布<i
                class="up"></i> </a></li>
          <li><a href="#" title="" @click="searchBySort($event)" sort-field="costprice" sort-type="asc">价格<i
                class="up"></i> </a></li>
          <li><a href="#" title="" @click="searchBySort($event)" sort-field="reigstertime" sort-type="asc">车龄<i
                class="up"></i> </a></li>
          <li><a href="#" title="" @click="searchBySort($event)" sort-field="mileage" sort-type="asc">里程<i
                class="up"></i> </a></li>
        </ul>
        <ul id="checkArea" class="screen-input tagTypesFilterNew">
          <li>
            <input type="checkbox" v-model="query.costeffective" @change="search" id="chaozhi">
            <label for="chaozhi">超值</label>
          </li>
          <li>
            <input type="checkbox" v-model="query.rushsale" @change="search" id="jishou">
            <label for="jishou">急售</label>
          </li>
          <li>
            <input type="checkbox" v-model="query.quasinewcar" @change="search" id="zhunxinche">
            <label for="zhunxinche">准新车</label>
          </li>
          <li>
            <input type="checkbox" v-model="query.transitivecountry" @change="search" id="keqianquanguo">
            <label for="keqianquanguo">可迁全国</label>
          </li>
        </ul>
      </div>
      <ul class="carList">
        <li v-for="car in pageInfo.pageList">
          <div class="list-infoBox">
            <a :title="car.title" target="_blank" class="imgtype" :href="`carDetail/${car.id}.html`">
              <img width="290" height="194" :src="car.cover" :alt="car.title" />
            </a>
            <p class="infoBox">
              <a :title="car.title" :href="`carDetail/${car.id}.html`" target="_blank" class="info-title">
                {{car.title}}
              </a>
            </p>
            <p class="fc-gray">
              <span class="tag-gray">{{car.shopAddress}}</span>
              <span class="">{{car.reigstertime}}上牌</span>
              <em class="shuxian">|</em>
              行驶{{car.mileage}}公里
            </p>
            <p class="priType-s">
              <span> <i class="fc-org priType"> {{car.costprice/10000}}万 </i> </span>
              <s>{{car.saleprice/10000}}万</s>
              <el-button size="mini" style="margin-left: 50px;margin-bottom: 10px;" @click="addshopping(car.id)">加入购物车</el-button>
            </p>
            <p>
              
            </p>
          </div>
        </li>
      </ul>
    </div>
    <div class="pages">

      <span v-for="page in pageInfo.totalPage">
        <a v-if="page == query.currentPage" class="on" @click="changePageSize(page)">{{page}}</a>
        <a v-else href="30/p/1.html" @click="changePageSize(page)">{{page}}</a>
      </span>
      <!--<a class="on" href="30/p/1.html">1</a>
    <a class="" href="30/p/2.html">2</a>
    <a class="" href="30/p/3.html">3</a>
    <a class="" href="30/p/4.html">4</a>
    <a class="" href="30/p/5.html">5</a>
    <a href="30/p/2.html">&gt;&gt;</a>
    <a href="30/p/6.html">6</a>-->
    </div>
    <div class="clear_fix"></div>
    <!--底部-->
    <div class="ftWrap">
      <div class="foot">
        <div class="cent">
          <div class="relate">
            <div class="items">
              <div class="tit"><i class="icon-angle-right"></i>交易帮助</div>
              <div class="con"><a href="#">买车帮助</a> <a href="#">卖车帮助</a> <a href="#">过户帮助</a></div>
            </div>
            <div class="items">
              <div class="tit"><i class="icon-angle-right"></i>客服中心</div>
              <div class="con"><a href="abut.html">网站合作</a> <a href="about.html">关于我们</a> <a
                  href="contact.html">联系我们</a>
              </div>
            </div>
            <div class="items">
              <div class="tit"><i class="icon-angle-right"></i>购车指南</div>
              <div class="con"><a href="#">购车帮助</a></div>
            </div>
            <div class="app-section"><img class="js-delayed-img" src="images/f_wx.jpg">
              <div class="title">扫码关注微信</div>
              <p> 随时随地，秒杀好车<br />
                优质个人二手车 </p>
            </div>
            <div class="items last">
              <div class="tel">
                <h1>XXX</h1>
                <p>周一至周日 8:00-18:00</p>
                <p>免费咨询(咨询、建议、投诉)</p>
                <a href="#" class="kf"><i class="kf-icon"></i>在线客服</a>
              </div>
              <div class="tel-mb">
                <p><span>XXX</span>周一至周日 8:00-18:00(仅收市话费)</p>
                <a href="#" class="kf"><i class="kf-icon"></i>在线客服</a>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="copyright">
        <div class="cent"> Copyright © 2020,All Rights Reserved 皖ICP备XXX号-1</div>
      </div>
    </div>

    <!--会员登录和注册弹出框开始-->
    <div id="popBox">
      <div class="popCont" style="height: 550px;"><a class="p_closed">关闭</a>
        <div class="p-tab"><a>会员登录<i></i></a><a>会员注册<i></i></a></div>
        <div class="p-detail">
          <div class="p-dl">
            <form onsubmit="return check();" enctype="multipart/form-data" method="post" name="form" id="form">
              <ul class="login-items">
                <li>
                  <label>用户名</label>
                  <input class="input" type="text" value="" maxlength="32" name="username" placeholder="请输入您的手机号">
                </li>
                <li>
                  <label>密码</label>
                  <input class="input" type="password" value="" maxlength="16" name="password">
                </li>
              </ul>
              <div class="login-check">
                <input type="checkbox" name="checkbox" style=" width:auto;" />
                <label>记住我</label>
                <a href="Meet/editPass">忘记登录密码？</a>
              </div>
              <div class="login-button">
                <input type="hidden" value="" name="carid" class="ordercarid" />
                <input type="hidden" value="" name="carstatus" class="orderstatus" />
                <input type="button" value="登&nbsp;&nbsp;&nbsp;&nbsp;陆" class="fM" onclick="$('#form').submit()" />
              </div>
            </form>
          </div>
          <div class="p-dl">
            <form class="registForm" onsubmit="return regcheck();" enctype="multipart/form-data" method="post"
              name="reg" id="reg">
              <ul class="login-items">
                <li class="clearfix">
                  <input class="input" name="mobile" v-model="sendMsgDTO.mobile" id="mobile" type="text" value="" placeholder="手机号码（登录帐号）">
                </li>
                <li class="clearfix">
                  <input class="input left" type="text" value="" v-model="sendMsgDTO.imageCode" name="verifycode" placeholder="输入验证码"
                    style="width:100px;margin-right: 20px;"/>
                  <div><img :src="imageCode"  @click="getImageCode" alt=""></div>
                </li>
                <li class="clearfix">
                  <input class="input left" type="text" value="" v-model="sendMsgDTO.smscode" name="verify" placeholder="输入验证码"
                    style="width:100px;" />
                  <div id="send"><a href="javaScript:void(0)" @click="sendMsg" class="send_code right">获取验证码</a></div>
                </li>
                <li class="clearfix">
                  <input class="input" type="text" value="" v-model="sendMsgDTO.username" name="realname" placeholder="姓名">
                </li>
                <li class="clearfix">
                  <input class="input" type="text" value="" v-model="sendMsgDTO.email" placeholder="邮箱">
                </li>
                <li class="clearfix">
                  <input class="input" type="password" v-model="sendMsgDTO.password" name="password" placeholder="输入密码（六位字符）">
                </li>
                <li class="clearfix">
                  <input class="input" type="password" v-model="sendMsgDTO.nickpassword" name="password" placeholder="输入密码（六位字符）">
                </li>
              </ul>
              <div class="login-button">
                <input type="hidden" value="" name="carid" class="ordercarid" />
                <input type="hidden" value="" name="carstatus" class="orderstatus" />
                <input type="button" value="立即注册" class="fM" @click="registerUser" />
              </div>
            </form>
          </div>
        </div>
      </div>
    </div>

    <!-- 右边效果 -->
    <div id="leftsead">
      <ul>
        <li>
          <a id="top_btn">
            <img src="images/foot03/ll06.png" width="47" height="49" class="hides" />
            <img src="images/foot03/l06.png" width="47" height="49" class="shows" />
          </a>
        </li>

        <li>
          <a href="">
            <img src="images/foot03/ll03.png" width="47" height="49" class="hides" />
            <img src="images/foot03/l03.png" width="47" height="49" class="shows" />
          </a>
        </li>

        <li>
          <a href="">
            <img src="images/foot03/ll02.png" width="166" height="49" class="hides" />
            <img src="images/foot03/l04.png" width="47" height="49" class="shows" />
          </a>
        </li>

        <li>
          <a class="youhui">
            <img src="images/foot03/l02.png" width="47" height="49" class="shows" />
            <img src="images/foot03/zfew.jpg" width="196" height="205" class="hides" usemap="#taklhtml" />
          </a>
        </li>


      </ul>
    </div>

  </div>

  <script type="text/javascript" src="script/3c-menu.js"></script>
  <script type="text/javascript" src="script/lg_reg.js"></script>
  <!--会员登录和注册弹出框结束-->
  <script>
    $(function () {
      var t = null, $this, i = 0;
      //品牌
      $(".brand-all").bind({
        mouseenter: function () {
          $(this).find(".otherbrand").show();
        },
        mouseleave: function () {
          $(this).find(".otherbrand").hide();
        }
      });

    });
  </script>
  <script type="text/javascript">
    $(".hoverWidget").each(function () {
      $(this).mouseenter(function () {
        $(this).addClass("active")
      }).mouseleave(function () {
        $(this).removeClass("active")
      })
    });
  </script>
  <script type="text/javascript">
    $(document).ready(function () {

      $("#leftsead a").hover(function () {
        if ($(this).prop("className") == "youhui") {
          $(this).children("img.hides").show();
        } else {
          $(this).children("img.hides").show();
          $(this).children("img.shows").hide();
          $(this).children("img.hides").animate({ marginRight: '0px' }, 'slow');
        }
      }, function () {
        if ($(this).prop("className") == "youhui") {
          $(this).children("img.hides").hide('slow');
        } else {
          $(this).children("img.hides").animate({ marginRight: '-143px' }, 'slow', function () {
            $(this).hide();
            $(this).next("img.shows").show();
          });
        }
      });

      $("#top_btn").click(function () {
        if (scroll == "off") return;
        $("html,body").animate({ scrollTop: 0 }, 600);
      });

    });
  </script>
  <script type="text/javascript">
    $(function () {
      $(".selecter").each(function () {
        var s = $(this);
        var z = parseInt(s.css("z-index"));
        var dt = $(this).children("dt");
        var dd = $(this).children("dd");
        var _show = function () {
          dd.slideDown(200);
          dt.addClass("cur");
          s.css("z-index", z + 1);
        };   //展开效果
        var _hide = function () {
          dd.slideUp(200);
          dt.removeClass("cur");
          s.css("z-index", z);
        };    //关闭效果
        dt.click(function () {
          dd.is(":hidden") ? _show() : _hide();
        });
        dd.find("a").click(function () {
          dt.html($(this).html());
          _hide();
        });     //选择效果（如需要传值，可自定义参数，在此处返回对应的“value”值 ）
        $("body").click(function (i) {
          !$(i.target).parents(".selecter").first().is(s) ? _hide() : "";
        });
      })
    })
  </script>

  <!-- vue -->
  <script type="text/javascript">
    new Vue({
      el: "#carDiv",
      data: {
        query: {
          currentPage: 1,
          pageSize: 12,
          keyword: "",
          typeId: null,
          minPrice: null,
          maxPrice: null,
          carAge: null,
          carAgeType: null,
          costeffective: null,
          rushsale: null,
          quasinewcar: null,
          transitivecountry: null,
          sortField: "",
          sortType: ""
        },
        pageInfo: {
          pageList: [],
          count: 0,
          totalPage: 0
        },
        allCarTypes: [],
        imageCode: '',
        imageCodePrefix: 'data:image/jpg;base64,',
        sendMsgDTO: {
          mobile: '',
          imageCode: '',
          smscode: '',
          username: '',
          password: '',
          nickpassword: ''
        },
        shoppingNum: '', // 购物车总数
      },
      methods: {
        // 获取所有车辆类型
        getAllCarType() {
          this.$http.get("/carType").then(res => {
            res = res.data
            if (res.success) {
              this.allCarTypes = res.data
            } else {
              this.$message.error(res.message)
            }
          })
        },
        searchCarType(carTypeId) {
          this.query.typeId = carTypeId
          this.search()
        },
        searchBySort(event) {
          this.query.sortField = $(event.currentTarget).attr("sort-field");   // 排序字段
          var sortType = $(event.currentTarget).attr("sort-type");    // 排序方式
          if (sortType == "asc") {  // 如果本次的排序方式是正序,那么就将它的属性值改为 倒序
            $(event.currentTarget).attr("sort-type", "desc")
          } else {
            $(event.currentTarget).attr("sort-type", "asc")
          }
          this.query.sortType = sortType;
          this.search();
        },
        searchByPrice(minPrice, maxPrice) {
          this.query.minPrice = minPrice * 10000;
          this.query.maxPrice = maxPrice * 10000;
          this.search();
        },
        changePageSize(currentPage) {
          console.log(currentPage)
          this.query.currentPage = currentPage;
          this.getCars();
        },
        // 当点击搜索按钮时,需要从第一页开始重新查询
        search() {
          console.log("444", this.query);
          this.query.currentPage = 1;
          if (this.query.costeffective == true) {
            this.query.costeffective = 1;
          } else {
            this.query.costeffective = null
          }
          if (this.query.rushsale == true) {
            this.query.rushsale = 1;
          } else {
            this.query.rushsale = null
          }
          if (this.query.quasinewcar == true) {
            this.query.quasinewcar = 1;
          } else {
            this.query.quasinewcar = null
          }
          if (this.query.transitivecountry == true) {
            this.query.transitivecountry = 1;
          } else {
            this.query.transitivecountry = null
          }
          this.getCars();
        },
        getCars() {
          this.$http.post("/car/carPage", this.query)
            .then(result => {
              result = result.data;
              if (result.success) {
                // 后端查询成功,渲染页面
                this.pageInfo = result.data;

                // 计算总页数 = total/pageSize  36/12=3
                this.pageInfo.totalPage = Math.ceil(this.pageInfo.count / this.query.pageSize);
              } else {
                this.$message.error(result.message)
              }
            })
        },
        // 生成随机字符串
        createUuid() {
          var s = [];
          var hexDigits = "0123456789abcdefghi";
          for (var i = 0; i < 36; i++) {
            s[i] = hexDigits.substr(Math.floor(Math.random() * 0x10), 1);
          }
          s[14] = "4"; // bits 12-15 of the time_hi_and_version field to 0010
          s[19] = hexDigits.substr((s[19] & 0x3) | 0x8, 1); // bits 6-7 of the clock_seq_hi_and_reserved to 01
          s[8] = s[13] = s[18] = s[23] = "-";

          var uuid = s.join("");
          return uuid;
        },
        // 发送请求
        getImageCode() {
          //发送请求到后台获取数据  VerifycodeController
          let imageCodeKey = sessionStorage.getItem("registerImageCodeKey");
          if (!imageCodeKey || imageCodeKey === '') {
            imageCodeKey = this.createUuid();
            sessionStorage.setItem("registerImageCodeKey", imageCodeKey);
          }
          this.$http.get("/login/img/" + imageCodeKey).then(res => {

            this.imageCode = this.imageCodePrefix + res.data.data;
          })
        },
        // 验证是否可发验证码
        sendMsg(event){
            //1.判断手机号不为空
            if(!this.sendMsgDTO.mobile){
                alert("手机号不能为空");
                return;
            }
            //2.判断图片验证码不为空
            if(!this.sendMsgDTO.imageCode){
                alert("图片验证码不能为空");
                return;
            }
            //3.获取按钮，禁用按钮
            var sendBtn = $(event.target);
            sendBtn.attr("disabled",true);

           this.sendMsgDTO.imageCodeKey = sessionStorage.getItem("registerImageCodeKey")


            //4.发送ajax请求
            this.$http.post("/login/vismscode",this.sendMsgDTO).then(res=>{
                var ajaxResult = res.data;
                if(ajaxResult.success){
                    alert("手机验证码已经发送到您的手机，请在1分钟内使用");
                    //4.1.发送成：倒计时
                    var time = 60;

                    var interval = window.setInterval( function () {
                        //每一条倒计时减一
                        time = time - 1 ;

                        //把倒计时时间搞到按钮上
                        sendBtn.val(time+"秒后重发");

                        //4.2.倒计时完成恢复按钮
                        if(time <= 0){
                            sendBtn.val("重新发送");
                            sendBtn.attr("disabled",false);
                            //清除定时器
                            window.clearInterval(interval);
                        }
                    },1000);
                }else{
                    //4.3.发送失败：提示，恢复按钮
                    sendBtn.attr("disabled",false);
                    alert("发送失败:"+ajaxResult.message);
                }
            })
        },
        registerUser(){
          this.$http.post("/login/phone/register",this.sendMsgDTO).then(res=>{
            res=res.data
            if(res.success){
              this.$message.success("注册成功")
              $('#popBox').fadeOut();
            }else{
              this.$message.error(res.message)
            }
          })
        },
        // 加入购物车
        addshopping(carId){
          this.$http.get("/shopping/addShopping/"+carId).then(res=>{
            res = res.data
            if(res.success){
              this.$message.success("成功添加购物车")
              // 重新查询数量
              this.getShoppingTotal()
            }else{
              this.$message.error(res.message)
            }
          })
        },
        getShoppingTotal(){
          this.$http.get("/shopping/shoppingtotal").then(res=>{
            res = res.data
            if(res.success){
              console.log("总数",res);
              if(res.data != 0){
                this.shoppingNum = res.data
              }
            }else{
              this.$message.error(res.message)
            }
          })
        }
      },
      mounted() {
        var obj = parseUrl()
        for(var key in obj){
          this.query[key] = obj[key]
        }

        // 等页面完毕就要执行
        this.getCars();
        this.getAllCarType()
        // 发送请求获取图片验证码
        this.getImageCode()    
        // 查询购物车总数
        this.getShoppingTotal() 
      }
    })
  </script>
</body>

</html>